// pages/home/report/report.js
import * as echarts from "../../../ec-canvas/echarts";

let chart = null;
const app = getApp();
let pages = getCurrentPages();
const currentPage = pages[pages.length - 1];

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });
  canvas.setChart(chart);

  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true,
    },
    legend: {
      data: ["CO2", "CH4", "N2O"],
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#999",
          },
        },
        axisLabel: {
          color: "#666",
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: app.chartYear,
        axisLine: {
          lineStyle: {
            color: "#999",
          },
        },
        axisLabel: {
          color: "#666",
        },
      },
    ],
    series: [
      {
        name: "CO2",
        type: "bar",
        label: {
          normal: {
            show: true,
            position: "inside",
          },
        },
        data: app.chartco2,
        itemStyle: {
          // emphasis: {
          //   color: '#37a2da'
          // }
        },
      },
      {
        name: "CH4",
        type: "bar",
        stack: "总量",
        label: {
          normal: {
            show: true,
          },
        },
        data: app.chartch4,
        itemStyle: {
          // emphasis: {
          //   color: '#32c5e9'
          // }
        },
      },
      {
        name: "N2O",
        type: "bar",
        stack: "总量",
        label: {
          normal: {
            show: true,
            position: "left",
          },
        },
        data: app.chartn2o,
        itemStyle: {
          // emphasis: {
          //   color: '#67e0e3'
          // }
        },
      },
    ],
  };

  chart.setOption(option);

  // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
  this.chart = chart;

  this.setData({
    isLoaded: true,
    isDisposed: false,
  });

  return chart;
}
function initPie(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    series: [
      {
        label: {
          normal: {
            fontSize: 14,
          },
        },
        type: "pie",
        center: ["50%", "50%"],
        radius: ["20%", "40%"],
        data: app.obj,
      },
    ],
  };

  chart.setOption(option);
  return chart;
}

function initLine(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: "公司历年碳排放量",
      left: "center",
    },
    legend: {
      data: ["CO2", "CH4", "N2O"],
      top: 50,
      left: "center",
      backgroundColor: "red",
      z: 100,
    },
    grid: {
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["2021", "2022", "2023"],
      // show: false
    },
    yAxis: {
      x: "center",
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      // show: false
    },
    series: [
      {
        name: "CO2",
        type: "line",
        smooth: true,
        data: app.annualCO2,
      },
      {
        name: "CH4",
        type: "line",
        smooth: true,
        data: app.annualCH4,
      },
      {
        name: "N2O",
        type: "line",
        smooth: true,
        data: app.annualN2O,
      },
    ],
  };

  chart.setOption(option);
  return chart;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {},
    canvasId: "mychart-bar",
    isLoaded: false,
    isDisposed: false,
    page: 1,
    canvasIds: ["mychart-bar", "mychart-pie", "mychart-line"],
    chartYear: [],
    chartco2: [],
    chartch4: [],
    chartn2o: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //点击下一页切换函数，函数的数据在data中，需要请求后端
    const that = this;
    wx.request({
      url: `http://localhost:8080/reporter_query/quarterly_discharges?year=2022&id=7`,
      header: {
        "content-type": "application/json", // 默认值
      },
      success(res) {
        console.log(res.data);
        const data = res.data;
        var chartco2 = [];
        var chartch4 = [];
        var chartn2o = [];
        var chartYear = [];
        data.forEach((item, index) => {
          chartco2 = [...chartco2, item.co2];
          chartch4 = [...chartch4, item.ch4];
          chartn2o = [...chartn2o, item.n2o];
          let q="第"+item.quarterly+"季度"
          chartYear = [...chartYear, q];
          app.chartco2=chartco2
          app.chartch4=chartch4
          app.chartn2o=chartn2o
          app.chartYear=chartYear
          // currentPage.setData({
          //   chartco2: chartco2,
          //   chartch4: chartch4,
          //   chartn2o: chartn2o,
          //   chartYear: chartYear,
          // });
        });
      },
    });

    wx.request({
      url: `http://localhost:8080/reporter_query/annual_discharge?year=2023&id=7`,
      header: {
        "content-type": "application/json", // 默认值
      },
      success(res) {
        // console.log(res.data);
        const data = res.data;
        // console.log(data)
        const obj=[{value:data.co2,name:'co2'},{value:data.ch4,name:'ch4'},{value:data.n2o,name:'n2o'}]
        app.obj=obj
        console.log(obj)
      },
    });

    wx.request({
      url: `http://localhost:8080/reporter_query/annual_discharges?id=7`,
      header: {
        "content-type": "application/json", // 默认值
      },
      success(res) {
        const data = res.data;
        // console.log(data)
        var co2=[]
        var ch4=[]
        var n2o=[]
        data.forEach(element => {
          co2=[...co2,element.co2]
          ch4=[...ch4,element.ch4]
          n2o=[...n2o,element.n2o]
        });
        app.annualCO2=co2
        app.annualCH4=ch4
        app.annualN2O=n2o
        console.log(co2,ch4,n2o)
      },
    });
  },

  onReady: function () {
    // 获取组件
    this.ecComponent = this.selectComponent("#mychart-dom-bar");

    this.ecComponent.init(initChart);
  },
  toNextPage() {
    this.dispose();
    this.setData({ canvasId: "mychart-pie" });
    const that = this;

    if (this.data.page == 1) {
      this.ecComponent.init(initPie);
    } else if (this.data.page == 2) {
      this.ecComponent.init(initLine);
    }

    let page = this.data.page + 1;
    this.setData({ page });

  },

  dispose: function () {
    if (this.chart) {
      this.chart.dispose();
    }

    this.setData({
      isDisposed: true,
    });
  },
});
